<template>
  <div class="all-container">
    <!-- <Header :choosedComponent="choosedComponent">
      <div
        v-show="choosedComponent != 'home'"
        :class="choosedComponent == 'home' ? 'active' : ''"
        @click="choosedComponent = 'home'"
      >
        返回首页
      </div>
    </Header> -->
    <div class="tabs flex-center">
      <div
        class="tab1"
        :class="choosedComponent == 'qingbaoduanyingyong' ? 'active' : ''"
        @click="choosedComponent = 'qingbaoduanyingyong'"
      >
        qbdyycg
        <!-- 情报端应用重构 -->
      </div>

      <!-- <div class="tab1" @click="go1">分布式训练</div> -->
      <div class="tab1" @click="go1">fbsxl</div>
      <!-- 
      <router-link
        :to="{ href: 'http://192.168.1.221:32060' }"
        target="_blank"
        class="tab2"
      >
        分布式训练
        fbsxl
      </router-link> -->

      <router-link
        :to="{ path: '/map', query: { id: 1, name: 'vue' } }"
        target="_blank"
        class="tab2"
      >
        <!-- 模型增量学习 -->
        mxzlxx
      </router-link>
      <div
        class="tab1"
        :class="choosedComponent == 'tuxiangdiwu' ? 'active' : ''"
        @click="choosedComponent = 'tuxiangdiwu'"
      >
        <!-- 图像地物提取 -->
        txdwtq
      </div>
      <div
        class="tab1"
        :class="choosedComponent == 'tuxiangmubiaoshibie' ? 'active' : ''"
        @click="choosedComponent = 'tuxiangmubiaoshibie'"
      >
        <!-- 图像目标识别 -->
        txmbsb
      </div>
      <div
        class="tab1"
        :class="choosedComponent == 'shipinmubiaojiance' ? 'active' : ''"
        @click="choosedComponent = 'shipinmubiaojiance'"
      >
        <!-- 视频目标检测跟踪 -->
        spmbjcgz
      </div>
      <!-- <div
        :class="choosedComponent == 'home' ? 'active' : ''"
        @click="choosedComponent = 'home'"
      >
        软件首页
      </div> -->
      <!-- <div
        class="tab2"
        :class="choosedComponent == 'newmap' ? 'active' : ''"
        @click="
          choosedComponent == 'qingbaoduanyingyong'
            ? (choosedComponent = 'newmap')
            : ''
        "
      >
        目标上图显示
      </div> -->
      <!-- <div class="tab2" @click="goMap">目标上图显示</div> -->
      <!-- <router-link
        :to="{ path: '/map' }"
        target="_blank"
        class="tab2"
        >目标上图显示</router-link
      > -->
      <div
        class="tab2"
        :class="choosedComponent == 'yuyinshibie' ? 'active' : ''"
        @click="choosedComponent = 'yuyinshibie'"
      >
        <!-- 语音识别 -->
        yysb
      </div>
      <!-- <router-link
        :to="{ path: 'http://192.168.1.181:31704/ts3d/web3d/' }"
        target="_blank"
        class="tab2"
      >
        战场环境分析
        zchjfx
      </router-link> -->
      <!-- <div class="tab1" @click="go2">战场环境分析</div> -->
      <div class="tab1" @click="go2">zchjfx</div>
      <div
        class="tab1"
        v-if="choosedComponent != 'home'"
        :class="choosedComponent == 'home' ? 'active' : ''"
        @click="choosedComponent = 'home'"
      ></div>
    </div>
    <div class="content">
      <transition name="fade-transform" mode="out-in">
        <keep-alive>
          <component
            v-if="choosedComponent != 'newmap'"
            :is="choosedComponent"
            @mubiaoshangtu="choosedComponent = 'newmap'"
          ></component>
        </keep-alive>
      </transition>
      <newmap v-if="choosedComponent == 'newmap'"></newmap>
    </div>
  </div>
</template>

<script>
// import Header from "@/components/header.vue";
import tuxiangdiwu from "@/components/tuxiangdiwu.vue";
import shipinmubiaojiance from "@/components/shipinmubiaojiance.vue";
import tuxiangmubiaoshibie from "@/components/tuxiangmubiaoshibie.vue";
import qingbaoduanyingyong from "@/components/qingbaoduanyingyong.vue";
import yuyinshibie from "@/components/yuyinshibie.vue";
import home from "@/components/home.vue";
import newmap from "@/components/newmap.vue";
export default {
  components: {
    // Header,
    tuxiangdiwu,
    shipinmubiaojiance,
    tuxiangmubiaoshibie,
    qingbaoduanyingyong,
    yuyinshibie,
    home,
    newmap,
  },
  data() {
    return {
      key: "value",
      choosedComponent: "home",
    };
  },
  methods: {
    go1() {
      window.open("http://192.168.1.221:32060", "_blank");
    },
    go2() {
      window.open("http://192.168.1.181:31704/ts3d/web3d/", "_blank");
    },
    goMap() {
      if (this.choosedComponent == "shipinmubiaojiance") {
        let routeData = this.$router.resolve({
          path: "/map",
        });
        window.open(routeData.href, "_blank");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// vh、vw计算函数
// @function vh($px) {
//   @return ($px/1020) * 100vh;
// }
// @function vw($px) {
//   @return ($px/1920) * 100vw;
// }
// tab按钮
.tabs {
  // padding: 0 0.4rem;
  div,
  a {
    display: block;
    text-decoration: none;
    // flex: 3;
    width: 2.3rem;
    height: 0.95rem;
    line-height: 0.95rem;
    font-size: 0.18rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #9aa7d3;
    background: url(~@/assets/images/按钮普通状态.png) no-repeat center;
    cursor: pointer;
    background-size: contain;
    // margin: 0.2rem 0 0 0;

    &:nth-child(9) {
      // margin-top: -0.1rem;
      font-size: 0.22rem;
      height: 0.95rem !important;
      width: 0.6rem !important;
      line-height: 0.95rem;
      // background-position-y: top;
      // font-family: PingFang-SC-Heavy, PingFang-SC;
      // font-weight: 800;
      // color: #c0cef8;
      // margin: auto 0.2rem;
      background: url(~@/assets/images/首页.svg) no-repeat center;
      background-size: 0.5rem 0.5rem;
    }
    // &:nth-child(9).active {
    //   background: url(~@/assets/images/按钮点击状态.png) no-repeat center;
    //   background-size: contain;
    // }
  }
  .active {
    background: url(~@/assets/images/按钮点击状态.png) no-repeat center;
    background-size: contain;
  }
}
.all-container {
  margin-bottom: 0.3rem;
}
// 主体部分
.content {
  position: relative;
  min-height: 5.2rem;
  width: 18.0746rem;
  border-radius: 0.04rem;
  // border: 1px solid rgba(0, 216, 245, 0.35);
  margin: 0 auto;
  // 右侧tab
  // .tab_right {
  //   width: 50%;
  //   height: 100%;
  //   flex: 1;
  //   text-align: right;
  //   .tab2 {
  //     width: 151px;
  //     height: 59px;
  //     float: right;
  //     font-size: 12px;
  //     color: #ffffff;
  //     line-height: 59px;
  //     text-align: center;
  //     background: url(~@/assets/images/按钮普通状态.png) no-repeat center;
  //     background-size: contain;
  //     cursor: pointer;
  //   }
  //   // 点击状态的类
  //   .active {
  //     background: url(~@/assets/images/按钮点击状态.png) no-repeat center;
  //   }
  // }
}
</style>